<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="/techshine_war/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="/techshine_war/bootstrap/bootstrap.css" media="all">
		<script src="/techshine_war/layui/layui.all.js" charset="utf-8"></script>
		<script src="/techshine_war/js/jquery.js"></script>
		<script src="/techshine_war/js/global.js" charset="utf-8"></script>
		<style>
			.layui-form-label {
				width: 120px;
			}
			
			.layui-input {
				width: 95%;
			}
			.editor-toolbar {
			  border: 1px solid #ccc;
			}
			
			.editor-text-area {
			  border: 1px solid #ccc;
			  border-top: 0;
			  height: 400px;
			}
		</style>
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>

	<body>
		<form class="layui-form" id="edit-form" action="" style="margin: 20px;">

			<div class="layui-form-item">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-block">
					<select name="filetype" id="filetype" lay-verify="required" lay-filter="filetype" >
							<option value="1" selected="selected">轮播图片</option>
							<option value="2">往届回顾图片</option>
							<option value="3">公司资质图片</option>
							<option value="4">作品展示图片</option>
							<option value="5">文档</option>

					</select>
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<label class="layui-form-label">序号</label>
				<div class="layui-input-block">
					<input type="number" name="seq" id="seq" lay-verify="seq" lay-reqtext="序号不能为空" value="1" placeholder="请输入名称" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" id="imgdiv">
				<label class="layui-form-label">图片</label>
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test1">上传图片</button><span id="zysx1" style="color: red;">建议图片尺寸100*100</span>
				 	<img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px;">
				    <p id="demoText"></p>
				</div>   
			</div>
			<div class="layui-form-item"id="filediv" style="display: none;">
				<label class="layui-form-label">文件</label>
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test2">上传文件</button><span id="zysx2" style="color: red;">5M大小以内的doc,exel,txt,pdf,zip</span>
				 	<span id="befofile"></span>
				    <p id="demoText"></p>
				</div>   
			</div>
			<input type="hidden" id="fileurl" name="fileurl" value="" />
			<input type="hidden" id="name" name="name" value="" />
			<input type="hidden" id="filesize" name="filesize" value="" />
			<input type="hidden" id="code" name="code" value="" />
			<div style="text-align: center;">
				<input type="hidden" id="id" name="id" value="" />
				<button type="submit" class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
				<button type="button" class="layui-btn layui-btn-primary" onclick="closePage()">关闭</button>
			</div>

		</form>
		
		<script>
			//Demo
			var id = getQueryString("id");

			var form;
			var submiting = false;
			layui.use(['layer', 'form','upload'], function() {
				var upload = layui.upload;
				form = layui.form;
				initupload(upload);
				initupload2(upload);
				initData();
				//自定义验证规则
				form.verify({
					
					seq: function(value) {
						if(value.length < 1) {
							return '请输入序号';
						}

					},

				});
				//监听提交
				form.on('submit(formDemo)', function(data) {
					if(submiting) {
						return false;
					}
					var data = $("form").serializeArray();
					$.ajax({
						type: "post",
						url: '/techshine_war/myfile/insert',
						async: false,
						data: data,
						success: function(res) {
							submiting = true;
							parent.reload();
							closePage();
						}
					});
					return false;
				});
				form.on('select(filetype)', function(data) {
					var sval = data.value;
					if(sval == '5') {
						$("#filediv").show();
						$("#imgdiv").hide();
					} else {
						if(sval=="1"){
							$("#zysx1").text("图片尺寸:长宽像素:1400*400")
						}else if(sval == '2'){
							$("#zysx1").text("图片尺寸:长宽像素:600*600")
						}else if(sval == '3'){
							$("#zysx1").text("图片尺寸:长宽像素:600*600")
						}else if(sval == '4'){
							$("#zysx1").text("图片尺寸:长宽像素:600*600")
						}
						$("#filediv").hide();
						$("#imgdiv").show();
					}
					form.render(); //更新全部
					//form.render('select');
				});
			});

			function initData() {
				if(id != null && id.length > 0) {
					$.ajax({
						type: "get",
						url: '/techshine_war/myfile/queryByKey?id=' + id,
						async: false,
						success: function(res) {
							echoEdit(res.result);
							$("#seq").val(res.result.seq);
							$("#name").val(res.result.name);
							$("#filetype").val(res.result.filetype);
							if(res.result.filetype!='5'){
								$("#demo1").attr("src",res.result.fileurl)
							}
							
							if(res.result.filetype=="5"){
								$("#filediv").show();
								$("#imgdiv").hide();
							}else{
								
								$("#filediv").hide();
								$("#imgdiv").show();
							}
							
							form.render();
						}
					});
				}else{
					form.render();
				}
			}
			
			var uploadInst;
			var uploadInst2;
			function initupload(upload){
				//普通图片上传
				 uploadInst = upload.render({
				    elem: '#test1'
				    ,url: '/techshine_war/menu/uploadpic?imgtype=2'
				    ,accept:'jpg|png|gif|bmp|jpeg'
				    ,size: 2048
				    ,before: function(obj){
				      //预读本地文件示例，不支持ie8
				      obj.preview(function(index, file, result){
				      	console.info(file.size)
				      	 $("#name").val(file.name)
					     $("#filesize").val((file.size/1014).toFixed(1) +'kb')
				        $('#demo1').attr('src', result); //图片链接（base64）
				      });
				    }
				    ,done: function(res){
				      //如果上传失败
				      if(res.errno > 0){
				        return layer.msg('上传失败');
				      }else{
				      	$("#fileurl").val((res.data)[0])
				      	$("#name").val(res.name)
				      	$("#code").val(res.saveurl)
				      }
				      //上传成功
				    }
				    ,error: function(){
				    	$("#fileurl").val("")
				      //演示失败状态，并实现重传
				      layer.msg("图片上传失败")
				      var demoText = $('#demoText');
				      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
				      demoText.find('.demo-reload').on('click', function(){
				        uploadInst.upload();
				      });
				    }
				  });
			}
			function initupload2(upload){
				//普通图片上传
				 uploadInst2 = upload.render({
				    elem: '#test2'
				    ,url: '/techshine_war/menu/uploadpic?imgtype=4'
				    ,accept:'file'
				    ,before: function(obj){
				      //预读本地文件示例，不支持ie8
				     //console.info(obj)
				     obj.preview(function(index, file, result){
					      //console.log(index); //得到文件索引
					      //console.log(file); //得到文件对象
					      //console.log(result); //得到文件base64编码，比如图片
					      $("#befofile").text(file.name+"&nbsp;&nbsp;&nbsp;&nbsp;"+(file.size/1014).toFixed(1) +'kb')
					      //这里还可以做一些 append 文件列表 DOM 的操作
					      $("#name").val(file.name)
					      $("#filesize").val((file.size/1014).toFixed(1) +'kb')
					      //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
					      //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
					    });
				    }
				    ,done: function(res){
				      //如果上传失败
				      if(res.errno > 0){
				        return layer.msg('上传失败');
				      }else{
				      	$("#fileurl").val((res.data)[0])
				      	$("#name").val(res.name)
				      	$("#code").val(res.saveurl)
				      }
				      //上传成功
				    }
				    ,error: function(){
				    	$("#fileurl").val("")
				      //演示失败状态，并实现重传
				      layer.msg("图片上传失败")
				      var demoText = $('#demoText');
				      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
				      demoText.find('.demo-reload').on('click', function(){
				        uploadInst.upload();
				      });
				    }
				  });
			}
		</script>
	</body>

</html>